import {Component} from "react";
import {View,Text,Button,StyleSheet,ScrollView} from "react-native";
import { observer,Provider,inject,PropTypes } from "mobx-react";
import {isObservable,isObservableArray,isObservableObject,isObservableMap,isObservableProp,isObservableSet,flowResult} from "mobx";
import {userStore,UserStore,makeAutoObservableStore,makeObservableStore,decoratorStore,runInActionStore,flowStore,computedStore,autoRunStore,reactionStore,whenStore,utilsStore, toJsStore, primitiveValue, configureStore} from "./store";
import {Wraper} from "./components/Wraper";

const MakeObservableStoreExample = observer(() => {
    return (
        <View style={styles.countWraper}>
            <View>
                <Text>value：{makeObservableStore.value}</Text>
                <Text>doubleValue：{makeObservableStore.double}</Text>
            </View>
            <Button title="点击增加" onPress={() => makeObservableStore.increment()}></Button>
        </View>
    )
});

const MakeAutoObservableStoreExample = observer(() => {
    return (
    <View style={styles.countWraper}>
        <Text>count(Comp1):{makeAutoObservableStore.count}</Text>
        <Button title="点击增加" onPress={() => makeAutoObservableStore.addCount()}></Button>
    </View>
    )
});

const DecoratorStoreExample = observer(() => {
    return (
    <View style={styles.countWraper}>
        <Text>value：{decoratorStore.count}</Text>
        <Button title="点击增加(异步)" onPress={() => decoratorStore.increment()}></Button>
    </View>
    )
});

const RunInActionStoreExample = observer(() => {
    return (
        <View style={styles.countWraper}>
            <Text>count：{runInActionStore.count}</Text>
            <Button onPress={runInActionStore.increment} title="点击增加(异步)"></Button>
        </View>
    )
});

const FlowStoreExample = observer(() => {
    return (
        <View style={styles.countWraper}>
            <Text>count：{flowStore.count}</Text>
            <Button onPress={() => flowResult(flowStore.increment())} title="点击增加(异步)"></Button>
        </View>
    )
});

const AutoRunStoreExample = observer(() => {
    return (
        <View style={styles.countWraper}>
            <View>
                <Text>count：{autoRunStore.count}</Text>
                <Text>修改记录(副作用)：</Text>
                {
                    autoRunStore.change_log.map(v => {
                        return <Text>{v}</Text>
                    })
                }
            </View>
            <Button title="点击减少" onPress={autoRunStore.subcribe}></Button>
            <Button title="点击增加" onPress={autoRunStore.increment}></Button>
        </View>
    )
});

const ReactionStoreExample = observer(() => {
    return (
        <View style={styles.countWraper}>
            <View>
                <Text>count:{reactionStore.count}</Text>
                <Text>修改记录(副作用)：</Text>
                {
                    reactionStore.change_log.map(v => {
                        return <Text>{v}</Text>
                    })
                }
            </View>
            <Button title="点击减少" onPress={reactionStore.subcribe}></Button>
            <Button title="点击增加" onPress={reactionStore.increment}></Button>
        </View>
    )
});

const WhenStoreExample = observer(() => {
    return (
        <View style={styles.countWraper}>
            <View>
                <Text>count：{whenStore.count}</Text>
                <Text>修改记录(副作用)：</Text>
                {
                    whenStore.change_log.map(v => {
                        return <Text>{v}</Text>
                    })
                }
            </View>
            <Button title="点击减少" onPress={whenStore.subcribe}></Button>
            <Button title="点击增加" onPress={whenStore.increment}></Button>
        </View>
    )
});

const UtilsStoreExample = observer(() => {
    return (
        <View>
            <Text>响应式值，使用工具函数判断：</Text>
            <Text>isObservableProp===：{isObservableProp(utilsStore,"num") + ""}</Text>
            <Text>isObservableSet===：{isObservableSet(utilsStore.set) + ""}</Text>
            <Text>isObservable===：{isObservable(utilsStore.arr) + ""}</Text>
            <Text>isObservableArray===：{isObservableArray(utilsStore.arr) + ""}</Text>
            <Text>isObservableMap===：{isObservableMap(utilsStore.map) + ""}</Text>
            <Text>isObservableObject===：{isObservableObject(utilsStore.obj) + ""}</Text>
            <Text>普通值，使用工具函数判断：</Text>

            <Text>isObservableProp===：{isObservableProp(utilsStore,"normal_num") + ""}</Text>
            <Text>isObservableSet===：{isObservableSet(utilsStore.normal_set) + ""}</Text>
            <Text>isObservable===：{isObservable(utilsStore.normal_arr) + ""}</Text>
            <Text>isObservableArray===：{isObservableArray(utilsStore.normal_arr) + ""}</Text>
            <Text>isObservableMap===：{isObservableMap(utilsStore.normal_map) + ""}</Text>
            <Text>isObservableObject===：{isObservableObject(utilsStore.normal_obj) + ""}</Text>
        </View>
    )
});

const ProviderAndInjectStoreExample = inject("UserStore")(observer((props:{UserStore?:UserStore}) => {
    const {UserStore}  = props;
    return (<View style={styles.countWraper}>
        <Text>用户名称：{UserStore!.userInfo.name}</Text>
        <Button title="修改用户名称" onPress={UserStore!.setName}></Button>
    </View>)
}))

const TojsStoreExample = () => {
    return <View>
        <Text>observable value：{JSON.stringify(toJsStore.obj)}</Text>
        <Text>primitive value：{JSON.stringify(primitiveValue)}</Text>
        <Text>value is observable?   {isObservableObject(toJsStore.obj) + ""}</Text>
        <Text>primitiveValue is observable?     {isObservableObject(primitiveValue) + ""}</Text>
    </View>
}

const ConfigureStoreExample = observer(() => {
    return <View>
        <Text>count：{configureStore.count}</Text>
        <Button onPress={() => configureStore.count++} title="不使用action"></Button>
        <Button onPress={() => configureStore.increment()} title="使用action"></Button>
    </View>
})


const styles = StyleSheet.create({
    scrollContainer:{
        height:"100%"
    },
    countWraper:{
        display:"flex",
        flexDirection:"row",
        alignItems:"center",
        gap:20
    },
    button:{
        fontSize:16
    }
})

function Entry(){
    return (
        <Provider UserStore={userStore}>
            <ScrollView style={{height:"100%"}}>
                <View style={{padding:20}}>
                    <Wraper title="自动转换属性">
                        <MakeAutoObservableStoreExample></MakeAutoObservableStoreExample>
                    </Wraper>

                    <Wraper title="手动转换属性">
                        <MakeObservableStoreExample></MakeObservableStoreExample>
                    </Wraper>

                    <Wraper title="装饰器合集">
                        <DecoratorStoreExample></DecoratorStoreExample>
                    </Wraper>

                    <Wraper title="异步增加(async、await)" desc="2秒之后，count变为200">
                        <RunInActionStoreExample></RunInActionStoreExample>
                    </Wraper>

                    <Wraper title="异步增加(flow)" desc="1秒后count变成1，随即1秒后count变成2">
                        <FlowStoreExample></FlowStoreExample>
                    </Wraper>

                    <Wraper title="副作用(autorun)" desc="count的值改变时会生成一条改变记录">
                        <AutoRunStoreExample></AutoRunStoreExample>
                    </Wraper>

                    <Wraper title="副作用(reaction)" desc="count的值改变时会生成一条改变记录">
                        <ReactionStoreExample></ReactionStoreExample>
                    </Wraper>

                    <Wraper title="副作用(when)" desc="当count等于4时，立即生成一条记录，且只执行一次">
                        <WhenStoreExample></WhenStoreExample>
                    </Wraper>

                    <Wraper title="工具函数">
                        <UtilsStoreExample></UtilsStoreExample>
                    </Wraper>

                    <Wraper title="依赖注入">
                        <ProviderAndInjectStoreExample></ProviderAndInjectStoreExample>
                    </Wraper>

                    
                    <Wraper title="observable to primitive" desc="primitive 由 mobx.toJS 转化">
                        <TojsStoreExample></TojsStoreExample>
                    </Wraper>
                    

                    <Wraper title="全局配置" desc="mobx默认状态不允许直接修改store状态，如果不使用action修改，会弹出警告">
                        <ConfigureStoreExample></ConfigureStoreExample>
                    </Wraper>
                    
                </View>


            </ScrollView>

        </Provider>
    )

}

export const MobxExampleOb = Entry;